<template>
  <div :class="showTitleFlag ? 'my-container': 'my-container1'">
    <div :class="showTitleFlag ? 'local-form-line-title': 'local-form-line-title1'">
      <span v-if="showTitleFlag">历史留言</span>
      <span v-if="datas.length > 0" :class="showTitleFlag ? 'my-button' : 'my-button1'" @click="openAll"><svg-icon style="margin-right: 5px" :icon-class="activeName.length > 0 ? 'unfold' : 'fold'"></svg-icon>{{ activeName.length > 0 ? '全部收起' : '全部展开'}}</span>
    </div>
    <div v-loading.lock="fullscreenLoading" element-loading-background="rgba(256, 256, 256, 1)" style="height: 94%;">
      <el-scrollbar style="height: 100%;">
        <p v-if="datas.length === 0" style="text-align:center;font-size:300px;margin:0;margin-top:0;">
          <svg-icon icon-class="nodata"></svg-icon>
        </p>
        <el-collapse v-else v-model="activeName">
          <el-collapse-item :key="index" :name="item.id + ''" v-for="(item, index) in datas">
            <template slot="title">
              <!--              <el-tooltip class="item" effect="light" :content="`留言对象：${item.type}`" placement="top-start">-->
              <span style="text-overflow: ellipsis;width: 95%;white-space: nowrap;overflow: hidden;">{{`留言对象：${item.type}`}}</span>
              <!--              </el-tooltip>-->
            </template>
            <el-timeline>
              <el-timeline-item v-for="(data, index) in item.list"
                                :key="index"
                                type='primary'
                                color='#abd5fb'
                                size='large'
                                :timestamp="data.docdate" placement="top">
                <el-card>
                  {{`${data.username}：` + data.content}}
                  <div v-if="showTitleFlag">
                    <div v-if="data.ceorecord && data.managerrecord" class="my-div">
                      <svg-icon class="my-icon" icon-class="u21"></svg-icon>
                      已读2人：{{item.ceo}}（省总）于 {{data.ceorecord.operatedate}} 已读<span style="padding-left: 40px">{{item.manager}}（项目经理）于 {{data.managerrecord.operatedate}} 已读</span></div>
                    <div v-if="data.ceorecord && !data.managerrecord" class="my-div">
                      <svg-icon class="my-icon" icon-class="u21"></svg-icon>
                      已读1人：{{item.ceo}}（省总）于 {{data.ceorecord.operatedate}} 已读
                    </div>
                    <div v-if="!data.ceorecord && data.managerrecord" class="my-div">
                      <svg-icon class="my-icon" icon-class="u21"></svg-icon>
                      已读1人：{{item.manager}}（项目经理）于 {{data.managerrecord.operatedate}} 已读
                    </div>
                    <div v-if="!data.ceorecord && !data.managerrecord" class="my-div">
                      <svg-icon class="my-icon" icon-class="u22"></svg-icon>
                      未读2人：{{item.ceo}}（省总）<span style="padding-left: 10px">{{item.manager}}（项目经理）</span></div>
                    <div v-if="data.ceorecord && !data.managerrecord" class="my-div">
                      <svg-icon class="my-icon" icon-class="u22"></svg-icon>
                      未读1人：{{item.manager}}（项目经理）
                    </div>
                    <div v-if="!data.ceorecord && data.managerrecord" class="my-div">
                      <svg-icon class="my-icon" icon-class="u22"></svg-icon>
                      未读1人：{{item.ceo}}（省总）
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  /** mixins */
  import { mixin_list } from '@tapui/mixins/mixin_list'
  /** 子组件 */
  import tlEdit from './edit'
  /** 工具类 */
  /** 工具类 */
  import { getAction } from '@tapui/utils/http'

  export default {
    name: 'mpmComments',
    mixins: [mixin_list],
    components: { tlEdit },
    data() {
      return {
        description: '评论表-列表查询',
        urlPrefix: '/mpm/comments/',
        url: {
          // queryCodeList: '/mpm/mpmComments/dataCodeList'
          list: '/mpm/comments/queryCommentList'
        },
        // 排序参数
        sorterInfo: {
          sidx: 'sortcode',
          sord: 'asc'
        },
        // 筛选参数
        filtersInfo: {
          qry_sourceType: '',
          qry_sourceId: ''
        },
        isQueryOnCreated: false,
        sourceId: '',
        activeName: [],
        fullscreenLoading: false
      }
    },
    props: {
      sourceType: {
        type: String,
        default: ''
      },
      showTitleFlag: {
        type: Boolean,
        default: true
      },
      querySelfOnly: {
        type: Boolean,
        default: false
      },
      queryReadRecord: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      queryCommentList() {
        if (!this.url.list) {
          this.$tap.alert('请设置list地址!', 'warning')
          return
        }
        let params = {
          qry_sourceType: this.sourceType,
          qry_sourceId: this.sourceId,
          qry_self: this.querySelfOnly,
          qry_record: this.queryReadRecord
        }
        // const loading = this.$loading({
        //   lock: true,
        //   text: 'Loading',
        //   spinner: 'el-icon-loading',
        //   background: 'rgba(0, 0, 0, 0.7)'
        // })
        // setTimeout(() => {
        //   loading.close()
        // }, 2000)
        this.openFullScreen1()
        getAction(this.url.list, params)
          .then((res) => {
            this.fullscreenLoading = false
            if (res.success) {
              this.datas = res.result.dataList
              if (this.datas && this.datas.length > 0) {
                for (let item of this.datas) {
                  if (item.active) {
                    this.activeName.push(item.id + '')
                  }
                }
              }
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
          .catch((err) => {
            this.fullscreenLoading = false
          })
      },
      openFullScreen1() {
        this.fullscreenLoading = true
      },
      openAll() {
        if (this.activeName.length > 0) {
          this.activeName = []
        } else {
          if (this.datas && this.datas.length > 0) {
            for (let item of this.datas) {
              this.activeName.push(item.id + '')
            }
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .local-form-line-title {
    height: 16px;
    line-height: 16px;
    border-left: 4px solid rgba(10, 110, 210, 1);
    padding-left: 8px;
    margin: 17px 0 12px 0;
    overflow: hidden;
    font-family: '思源黑体 CN', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
  }

  .local-form-line-title1 {
    border-left: 4px solid white;
    height: 16px;
    line-height: 16px;
    margin: 17px 0 12px 0;
    overflow: hidden;
    font-family: '思源黑体 CN', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
  }

  /deep/ .el-scrollbar__wrap {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
  }

  /deep/ .el-collapse-item__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 48px;
    line-height: 48px;
    background-color: rgba(241, 248, 255, 1);
    color: #303133;
    cursor: pointer;
    border-bottom: 1px solid #EBEEF5;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
    outline: 0;
    padding-left: 10px;
  }

  /deep/ .el-collapse {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
  }

  /deep/ .el-collapse-item__wrap {
    will-change: height;
    background-color: #FFF;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid white;
  }

  /deep/ .el-collapse-item__header.is-active {
    border-bottom-color: transparent;
    margin-bottom: 20px;
  }

  .my-button {
    color: #0A6ED2;
    background: 0 0;
    padding-left: 20px;
    padding-right: 0;
    font-size: 14px;

    &:hover {
      cursor: pointer;
    }
  }

  .my-button1 {
    color: #0A6ED2;
    background: 0 0;
    padding-right: 0;
    font-size: 14px;

    &:hover {
      cursor: pointer;
    }
  }

  .my-container {
    height: 40vh;
  }

  .my-container1 {
    height: 60vh;
  }

  .my-icon {
    margin-right: 5px;
    width: 7px;
    height: 7px;
    margin-bottom: 3px;
  }

  .my-div {
    color: #898989;
    font-family: '思源黑体 CN', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    text-align: left;
    line-height: 24px;
    margin: 5px 0;
  }
</style>

